<template>
    <view class="indentify" @click="AIindentify">
        <image src="@/static/other/AI-shibie.svg"></image>
        <text>身份证智能识别</text>
    </view>
    <view class="form">
        <view class=" flex-r">
            <text class="title">
                真实姓名
            </text>
            <input placeholder-class="placehoder-style" placeholder="请输入真实姓名" v-model="formData.name" />
        </view>
        <view class=" flex-r">
            <text class="title">
                性别
            </text>
            <picker mode="selector" :range="gender" @change="selectGender">
                <view class="flex-right">
                    <text>{{formData.sex=='' ? '请选择性别' : formData.sex}}</text>
                    <image class="" src="../../static/other/gengduo.svg">
                    </image>
                </view>
            </picker>
        </view>
        <view class=" flex-r">
            <text class="title">
                出生日期
            </text>
            <picker mode="date" @change="selectBorndate">
                <view class="flex-right">
                    <text>{{formData.born=='' ? '请选择出生日期' :formData.born}}</text>
                    <image class="" src="../../static/other/gengduo.svg">
                    </image>
                </view>
            </picker>
        </view>
        <view class=" flex-r">
            <text class="title">
                成员关系
            </text>
            <picker mode="selector" :range="relation" @change="selectRelation">
                <view class="flex-right">
                    <text>{{formData.relation=='' ? '请选择成员关系' : formData.relation}}</text>
                    <image class="" src="../../static/other/gengduo.svg">
                    </image>
                </view>
            </picker>
        </view>
        <view class=" flex-r">
            <text class="title">
                身份证
            </text>
            <input type="number" placeholder-class="placehoder-style" placeholder="请输入身份证号码"
                v-model="formData.id_card" />
        </view>
        <view class="flex-r">
            <text class="title">
                手机号
            </text>
            <input type="number" placeholder-class="placehoder-style" placeholder="请输入手机号" v-model="formData.phone" />
        </view>
        <!-- 底部按钮 -->
        <view style="height:400rpx"></view>
        <view class="form">
            <view class="submit">
                <text @click="canCel">取消</text>
                <text @click="subMit">提交</text>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts" >
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref, toRefs, ToRef, toRef, watch } from 'vue';
import { hpv_pack, hpv_time } from '@/public/decl-type'
import Requestapi from '@/public/request'
import { uploadImage } from '@/public/tools';
import { noop } from '@babel/types';
//提交的表单数据
let formData = reactive({
    name: '',
    sex: '',
    born: '',
    relation: '',
    id_card: '',
    phone: ''
});
//选择性别
let gender = ref([
    '男', '女'
]);
//成员关系
let relation = ref<string[]>(['自己', '父母', '其他'])
function selectGender(data: any) {
    formData.sex = gender.value[data.detail.value]
}
//选择出生日期
function selectBorndate(data: any) {
    formData.born = data.detail.value
}
//智能识别身份证
function AIindentify() {
    uploadImage(Requestapi.indentfy, '识别中', '识别失败').then((res: any) => {
        let data = JSON.parse(res.data);
        if (res.statusCode == 200) {
            formData.sex = data.data.sex;
            formData.born = data.data.born;
            formData.id_card = data.data.id_card;
            formData.name = data.data.name
        } else {
            uni.showToast({
                title: data.data,
                icon: 'none',
                duration: 2000
            })
        }
    }).catch(ERR => {
        console.log(ERR);
    })
}

//选择成员关系
function selectRelation(data: any) {
    formData.relation = relation.value[data.detail.value]
}
//提交数据
function submitData() {
    uni.showLoading({ title: "提交中", mask: true })
    Requestapi.hpv_res(formData).then(res => {
        uni.hideLoading();
        uni.redirectTo({
            url: "/pages/hpvOrder/index"
        })
    }).catch(err => {
        console.log(err);

    })
}
//取消
function canCel() {
    uni.navigateBack();
}
//提交数据
function subMit() {
    uni.showLoading({ title: '提交中', mask: true })
    Requestapi.PatientRes(formData).then((res: any) => {
        uni.hideLoading()
        uni.navigateBack({ delta: 1 })
    }).catch((err: any) => {
        console.log(err);
    })
}
</script>
<style>
page {
    background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.form {
    background-color: #ffffff;
    margin-top: 20rpx;

    .bottom {
        position: fixed;
        width: 100%;
        bottom: 40rpx;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 100;

        .btn {
            background-color: #2c76ef;
            color: #ffffff;
            margin-right: 20rpx;
            padding: 15rpx 30rpx;
            border-radius: 5%;
        }

        .price {
            color: #ff5f2c;
            font-size: 25rpx;
            margin-left: 15rpx;
        }
    }
}

.top {
    margin-bottom: 10rpx;
    padding: 20rpx;
    background-color: #ffffff;
    margin-bottom: 15rpx;

    .felx-r-one {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15rpx;

        .title {
            font-size: 35rpx;
        }

        .price {
            color: #ff5f2c;
            font-size: 25rpx;
        }
    }

    .flex-r {
        display: flex;
        align-items: center;

        .dric {
            padding: 8rpx 8rpx;
            margin-right: 6rpx;
            background-color: #f4f6fa;
            font-size: 25rpx;
        }
    }
}

.indentify {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background-color: #ffffff;

    image {
        margin-right: 10rpx;
        width: 80rpx;
        height: 80rpx;
    }
}
</style>